<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title" v-if="$store.state.user.checked">匿名同学</view>
			<view class="header-title" v-else>{{ $store.state.user.personal.nickName }}</view>
		</view>
		<view class="body" v-if="pictureshow">
				<view class="body-consult">
					<view class="body-consult-left">
						<view class="body-consult-icon student">
							
						</view>
						<view class="body-consult-text" v-if="$store.state.user.checked">
							匿名同学
						</view>
						<view class="body-consult-text" v-else>
							{{ $store.state.user.personal.nickName }}
						</view>
					</view>
					<view class="body-consult-center">
						<view class="body-consult-zx">
							咨询
						</view>
						<view class="body-consult-line">
							
						</view>
					</view>
					<view class="body-consult-right">
						<view class="body-consult-icon teacher">
							
						</view>
						<view class="body-consult-text">
						    心理老师
						</view>
					</view>
				</view>
				<view class="body-text">
					<view class="body-ask-asterisk"></view>
					<el-input
					  type="textarea"
					  :autosize="{ minRows: 2, maxRows: 5 }"
					  placeholder="请在此处描述您的问题"
					  v-model="describe"
					  maxlength="500"
					  show-word-limit>
					</el-input>
					<!-- <uni-easyinput type="textarea" autoHeight v-model="describe" placeholder="请在此处描述您的问题"></uni-easyinput> -->
				</view>
				<view class="body-voice">
					<Voice></Voice>
				</view>
				<view class="body-picture">
					<uni-file-picker
						fileMediatype="image" 
						@select="select"
						@delete="deleteit" 
						limit="6"
						title="添加图片"
						file-extname="png,jpg"
					/>
				</view>
				<view class="body-anonymous">
					<view class="">匿名提问</view>
					<view class=""></view>
					<Switcher :defaultChecked="true" checkedInfo="" uncheckedInfo="" :disabled="false" ref="switch" @change="ischange()"/>
				</view>
				<view class="">
					
				</view>
		</view>
		<view class="body-button" @click="result()">
			开始询问
		</view>
		<!-- 弹出 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-close" @click="closepopup()"></view>
				<view class="popup-title">{{ popup.title }}</view>
				<view class="popup-text">{{ popup.text }}</view>
				<view class="popup-button" @click="closepopup()">{{ popup.button }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Voice from '@/components/Voice'
	import Switcher from '@/components/Switcher'
	import { getCounselingAsk, uploadAvatar, getCommonUploads, getCommonUploadsmp3} from "@/api/index";
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		components: {
			Switcher,Voice
		},
		data() {
			return {
				describe:'',
				popup:{
					title:'提问失败',
					text:'提问失败',
					button:'确定',
				},
				picturelist: [],
				imgUrl: [],
				pictureshow: true,
				loading: false,
			}
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					console.log("newval",newval)
					this.Initialize()
				}
			}
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.total=0
				this.pictureshow=false
				this.$nextTick(()=>{
					this.pictureshow=true
				})
				this.picturelist=[]
			},
			select(e){
				console.log("e.tempFilePaths[0]",e.tempFilePaths[0])
				pathToBase64(e.tempFilePaths[0]).then(path => {
					this.picturelist.push({uuid: e.tempFiles[0].uuid, name: 'files', filePath: path})
			    })
			},
			deleteit(e){
				let list = []
				for(let i in this.picturelist){
					if(this.picturelist[i].uuid!=e.tempFile.uuid){
						list.push(this.picturelist[i])
					}
				}
				this.picturelist = list
			},
			async pictureclick(){
				if(this.describe==''){
					this.popup.text = '未填写描述'
					this.$refs.popup.open('center')
					this.loading = false
					return
				}
				uni.showToast({title: '提交中,请等待...'})
				console.log("this.picturelist",this.picturelist)
				this.imgUrl = []
				for(let i in this.picturelist){
					// console.log("this.picturelist[i].filePath",this.picturelist[i].filePath)
					let data = {name: 'files', filePath: this.picturelist[i].filePath}
					await getCommonUploads(data).then(res => {
						this.imgUrl.push(res.fileNames)
					})
				}
				console.log("this.imgUrl",this.imgUrl)
				let questionPicture = '' 
				for(let i in this.imgUrl){
					if(i==0){
						questionPicture=this.imgUrl[0]
					}else{
						questionPicture+=';'+this.imgUrl[i]
					}
				}
				
				await this.dealvoicelist()
				let vlist = this.$store.state.user.voicelist
				let questionVoice=''
				for(let i in vlist){
					if(i==0){
						questionVoice=vlist[0].url
					}else{
						questionVoice+=';'+vlist[i].url
					}
				}
				let isAnonymous="0"
				if(this.$refs.switch.checked){
					isAnonymous="1"
				}
				let data={
					"isAnonymous": isAnonymous,
					"question": this.describe,
					"questionPicture": questionPicture,
					"questionVoice": questionVoice,
				}
				await this.counselingAsk(data)
			},
			async dealvoicelist(){
				let voicelist = this.$store.state.user.voicelist
				for(let i in voicelist){
					let data = {name: 'files', filePath: voicelist[i].base64}
					await getCommonUploadsmp3(data).then(res => {
						voicelist[i].url = res.fileNames
					})
				}
				this.$store.state.user.voicelist = voicelist
			},
			counselingAsk(data){
				getCounselingAsk(data).then(res => {
					this.loading = false
					uni.hideToast()
					this.describe = ''
					this.$store.state.user.refresh=!this.$store.state.user.refresh
					this.$router.push('/pages/psychological/result')
				});
			},
			returnclick(){
				this.$router.push('/pages/psychological/index')
			},
			result(){
				if(this.loading){
					return
				}else{
					this.loading = true
					this.pictureclick()
				}
			},
			closepopup(){
				this.$refs.popup.close()
			}
		},
	}
</script>

<style>
.container {
	font-size: 4vw;
	width: 100vw;
	height: 100vh;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	grid-template-rows: 12.5vw auto 12.5vw;
}

.header {
	width: 100%;
	height: 12.5vw;
	background: #ffffff;
	border: 1px solid #F6F7F8;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	/* grid-template-rows: 1fr 1fr; */
}

.header-title {
	font-size: 5vw;
}

.header-return {
	position: absolute;
	width: 5vw;
	height: 5vw;
	left: 5vw;
	top: 3.5vw;
	background: url(../../static/index/return.svg);
	background-size: 100% 100%;
	cursor: pointer;
}

.body {
	margin: 0 0 0 0;
	width: 100vw;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: start;
	grid-row-gap: 2vw;
	/* grid-template-columns: 1fr; */
	grid-template-rows: auto auto auto auto auto 1fr;
	overflow: auto;
}

.body-consult {
	margin: 2vw 0 0 0;
	width: 96%;
	height: 30vw;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	background: #ffffff;
}

.body-consult-left {}

.body-consult-center {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-rows: auto auto;
	color: #FF6A2A;
}

.body-consult-right {}

.body-consult-icon {
	width: 15vw;
	height: 15vw;
}

.student {
	background: url(../../static/psychological/student.svg);
	background-size: 100% 100%;
}

.teacher {
	background: url(../../static/psychological/psyteacher.svg);
	background-size: 100% 100%;
}

.body-consult-text {
	display: grid;
	justify-items: center;
	align-items: center;
}

.body-consult-line {
	width: 35vw;
	height: 5vw;
	background: url(../../static/psychological/line.svg);
	background-size: 100% 100%;
}

.body-text {
	padding: 2vw 2vw 2vw 2vw;
	width: 96%;
	/* height: 23vw; */
	display: grid;
	justify-items: center;
	align-items: start;
	grid-template-columns: auto 1fr;
	background: #ffffff;
}

.body-voice {
	padding: 2vw 2vw 2vw 2vw;
	width: 96%;
	height: auto;
	background: #ffffff;
}

.body-picture {
	padding: 2% 5% 5% 5%;
	width: 96%;
	height: auto;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	background: #ffffff;
}

.body-anonymous {
	width: 96%;
	height: 10vw;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 30% 1fr 20%;
	background: #ffffff;
}

.body-button {
	width: 95vw;
	height: 10vw;
	border-radius: 5vw;
	display: grid;
	justify-items: center;
	align-items: center;
	/* font-size: 4vw; */
	color: #ffffff;
	background: #1492FF;
	cursor: pointer;
}

.body-ask-asterisk {
	margin: 1.6vw 1vw 0 0;
	width: 2vw;
	height: 2vw;
	background: url(../../static/aqc/asterisk.svg);
	background-size: 100% 100%;
}

.popup {
	width: 60vw;
	height: 40vw;
	background: #ffffff;
	position: absolute;
	margin-left: -30vw;
	margin-top: -20vw;
	border-radius: 2.2vw;

	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-rows: 5vw 5vw 15vw 15vw;
}

.popup-close {
	margin: 2vw 0 0 55vw;
	width: 3vw;
	height: 3vw;
	background: url(../../static/index/close.svg);
	background-size: 100% 100%;
	cursor: pointer;
}

.popup-title {
	display: grid;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	font-size: 4vw;
}

.popup-text {
	margin: 0 5vw 0 05vw;
	width: 50vw;
	display: grid;
	justify-content: center;
	align-items: center;
	font-size: 3.4vw;
}

.popup-button {
	margin: 0 5vw 0 5vw;
	width: 50vw;
	height: 8vw;
	border-radius: 4vw;
	display: grid;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	background: #1492FF;
	cursor: pointer;
}
</style>